<template>
    <div class="managemusic">
        <!-- 头部 -->
        <Row style="padding:20px 60px 20px 0px;">
            <!-- 搜索框 -->
            <Col span="9">
                <div class="block" style="display:flex;justify-content: space-between;">
                    <span class="demonstration" style="transform:translateY(7px)">订单查询</span>
                    <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                    <Button @click="searchOrder()" style="transform:translateY(4px)">查询</Button>
                </div>
                
            </Col>
            <Col span="12" style="text-align:right;">
                <Button type="primary" @click="getAll">所有订单</Button>
            </Col>
        </Row>

        <!-- 订单表-->
        <div style="width: 100%;background-color: #f40;">
            <el-table :data="allOrders" border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="60">
                </el-table-column>
                <el-table-column prop="_id" label="订单编号" align="center" width="240">
                </el-table-column>
                <el-table-column prop="account" label="账号" align="center" width="190">
                </el-table-column>
                <el-table-column prop="password" label="明文密码" align="center" width="130">
                </el-table-column>
                <el-table-column prop="amount" label="金额" align="center" width="100">
                </el-table-column>
                <el-table-column prop="start" label="开始时间" align="center" width="200">
                </el-table-column>
                <el-table-column prop="end" label="结束时间" align="center" width="200">
                </el-table-column>
                <el-table-column prop="key" label="密文" align="center" width="160">
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right" align="center">
                    <template slot-scope="scope">
                        <!-- 删除 -->
                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-button type="danger"
                            size="samll"
                            circle
                            icon="el-icon-delete"
                            @click="onDeleteOrder(scope.row)">
                        </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <Row>
            <Col span="24" style="text-align: right;padding:0 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="paginations.pageIndex" :page-sizes="paginations.pageSizes"
                :page-size="paginations.pageSize" :layout="paginations.layout" :total="paginations.total">
            </el-pagination>
            </Col>
        </Row>

        <!-- 密码验证对话框 -->
        <Modal width="360" draggable v-model="isCheckPassword" :mask-closable="false">
            <p slot="header" style="color:#f60;">
                <Icon type="ios-information-circle"></Icon>
                <span>验证密码</span>
            </p>
            <div style="text-align:left;font-size: 14px;">
                <Row>
                    <Col span="18">
                    <!--不加enter的话，输入密码时会一直响应，在组件使用要加native-->
                    <!-- 组件响应原生事件，要加native。Input是组件 -->
                    <Input type="password" icon="ios-key" placeholder="请输入管理员密码..." v-model="inputPassword"
                        @keyup.enter.native="checkPwd()" />
                    </Col>
                    <Col span="6">
                    <el-button type="primary" size="small" @click="checkPwd()">验证</el-button>
                    </Col>
                </Row>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'allorders',
    data() {
        return {
            // 验证密码
            isCheckPassword: false,
            inputPassword: '',
            // 展示在页面上的每一页的所有歌曲
            allOrders: [],
            // 是所有的歌曲，和数据库中的歌曲保持一致
            allTableOrders: [],

            // 搜索关键字
            time:"",

            // 分页
            paginations: {
                pageIndex: 1,// 当前位于哪一个页面
                total: 0,//总个数
                pageSize: 5,// 每一页显示多少条
                pageSizes: [5, 10, 15, 20, 25],
                layout: "sizes, prev, pager, next, jumper, total" // 翻页的属性
            },
            pickerOptions: {
            shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
        }
    },
    created() {
        this.getAllOrder()
    },
    watch: {

    },
    methods: {
        // 验证管理员密码
        checkPwd() {
            console.log('checkPwd')
            // 获取输入的密码
            const inputPassword = this.inputPassword.trim()
            if (inputPassword.length > 0) {
                // 把密码验证框给关闭
                this.isCheckPassword = false

                // 把这个密码发到服务端去校验
                this.$axios.post('http://localhost:3000/api/admin/islegal', {
                    password: inputPassword,
                    email: this.$store.getters.adminInfo.email
                }).then(res => {
                    // 把表单中的数据给发送到服务端
                    // 提交添加音乐对话框表单中的数据
                    console.log('islegal res=>', res)
                    if (res.data.result == "true") {
                        if (this.flag == 3) { // 删除
                            this.$axios.post('http://localhost:3000/api/admin/music/deleteOrder', { _id: this.delRow._id })
                                .then(res => {
                                    console.log('订单返回res=>', res.data)
                                    // 刷新列表
                                    this.getAllOrder()

                                    // 清空数据
                                    this.inputPassword = ""
                                    this.$Message.success('删除成功')
                                })
                        }
                    }
                }).catch(err => {
                    this.inputPassword = ""
                })
            } else {
                this.isCheckPassword = false
                this.$Modal.warning({
                    title: '提示',
                    content: '密码不能为空，请输入管理员口令',
                    onOk: () => {
                        this.isCheckPassword = true
                    }
                })
            }
        },
        // 搜索订单
        searchOrder() {
            this.$axios.post('http://localhost:3000/api/admin/searchByTime', {
                time:this.value2
            }).then(res => {
                this.allTableOrders = res.data.result // 所有的歌曲 12条数
                console.log('allTableOrders=>',res.data.result);
                // 分页
                this.paginations.total = this.allTableOrders.length
                this.paginations.pageIndex = 1
                this.paginations.pageSize = 5

                this.allOrders = this.allTableOrders.filter((item, index) => { //过滤之后，只剩下5条数据了。
                    return index < this.paginations.pageSize
                })
            })
        },
        //获取所有订单
        getAll(){
            this.getAllOrder()
            this.value2=""
        },
        // 获取所有的歌曲
        getAllOrder() {
            this.$axios.get('http://localhost:3000/api/admin/allorders')
                .then(res => {
                    console.log('getAllOrder res=>', res)
                    this.allTableOrders = res.data.result // 所有的歌曲 12条数

                    // 分页
                    this.paginations.total = this.allTableOrders.length
                    this.paginations.pageIndex = 1
                    this.paginations.pageSize = 5

                    this.allOrders = this.allTableOrders.filter((item, index) => { // 过滤之后，只剩下5条数据了。
                        return index < this.paginations.pageSize
                    })
                }).catch(err => {
                    this.$Message.error(err)
                })
        },
        // 当前页，页码改变
        handleCurrentChange(page) {
            console.log('当前页=>', page)
            // 在前端分页
            // 获取当前页的数量
            // 0~4 5~9 10~11
            let sortNum = this.paginations.pageSize * (page - 1) // 5
            const tableData = this.allTableOrders.filter((item, index) => {
                return index >= sortNum
            })
            console.log('tableData=>', tableData)
            // this.allSongs = tableData.filter((item,index)=>{
            //     return index < this.paginations.pageSize
            // })
            this.allOrders = tableData.slice(0, 5)
        },
        // 改变每页条数
        handleSizeChange(pageSize) {
            console.log('每一页个数=>', pageSize)
            this.paginations.pageIndex = 1
            this.paginations.pageSize = pageSize

            this.allOrders = this.allTableOrders.slice(0, pageSize)
        },
        // 删除订单
        onDeleteOrder(order) {
            console.log('删除订单order=>', order)
            // 弹框提示是否删除
            this.$confirm(`确定删除账号为${order.account}的订单？不可撤销，是否继续?`,
                "风险提示",
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                this.isCheckPassword = true
                this.flag = 3
                this.delRow = order
                console.log('删除的订单=>', this.delRow)
            }).catch(err => {
                // 点击取消后进入这里执行
                console.log('取消：', err)
            })
            // 验证密码
        }
    }
}
</script>

<style lang="less" scoped>
.managemusic {
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 100px;
    padding-left: 10px;
}
.toListen-link {
    cursor: pointer;

    &:hover {
        color: rgb(223, 107, 72)
    }
}
</style>